<template>
	<view class="background"></view>
	<view class="head">
		<view class="back">
			<image src="@/static/public/arrow_left_000000.png" mode="widthFix"></image>
		</view>
		<view class="text">
			实名认证
		</view>
	</view>
	<view class="form">
		<view class="title">
			<view class="line">
				<image src="@/static/account/line-left.png" mode="widthFix"></image>
			</view>
			<view class="text">填写信息</view>
			<view class="line">
				<image src="@/static/account/line-right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="tap">
			姓名
		</view>
		<view class="input">
			<up-search placeholder="请输入" :showAction="false" searchIcon="" bgColor="#F4F4F4" v-model="name"></up-search>
		</view>
		<view class="tap">
			身份证号
		</view>
		<view class="input">
			<up-search placeholder="请输入" :showAction="false" searchIcon="" bgColor="#F4F4F4"
				v-model="idNumber"></up-search>
		</view>
		<view class="tap">
			支付宝名
		</view>
		<view class="input">
			<up-search placeholder="请输入" :showAction="false" searchIcon="" bgColor="#F4F4F4"
				v-model="alipayName"></up-search>
		</view>
		<view class="tap">
			支付宝账号
		</view>
		<view class="input">
			<up-search placeholder="请输入" :showAction="false" searchIcon="" bgColor="#F4F4F4"
				v-model="alipayAccount"></up-search>
		</view>
		<view class="agreement">
			<up-checkbox usedAlone size="34rpx" shape="circle" v-model:checked="aloneChecked"></up-checkbox>
			<view class="text-1">我已阅读</view>
			<view class="text-2">《xxx协议》</view>
		</view>
		<view class="button" @click="submit">确定</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import api from '@/utlis/api.js';
	import { userInfo } from '@/utlis/config';


	const name = ref("");
	const idNumber = ref("");
	const alipayName = ref("");
	const alipayAccount = ref("")

	const aloneChecked = ref(false);
	const submit = () => {
		if (!aloneChecked.value) {
			uni.showToast({
				title: "请勾选协议",
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (name.value == "") {
			uni.showToast({
				title: "请填写名称",
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (idNumber.value == "") {
			uni.showToast({
				title: "请填写身份证号",
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (alipayName.value == "") {
			uni.showToast({
				title: "请填写支付宝名",
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (alipayAccount.value == "") {
			uni.showToast({
				title: "请填写支付宝账号",
				icon: 'none',
				duration: 2000
			})
			return;
		} 

		api("app/user/userBase/real-name", "PUT", {
			name: name.value,
			idNumber: idNumber.value,
			alipayName: alipayName.value,
			alipayAccount: alipayAccount.value
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000
			})
			if (res.code == 200) {
				userInfo().then(data => {
					uni.$store.commit("setUser", data)
					uni.switchTab({ url: "/pages/mine/index" });
				})
			}
		});
	}
</script>
<style lang="scss">
	.background {
		width: 100vw;
		height: 100vh;
		background-image: url("@/static/account/background.png");
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		right: 1rpx;
		z-index: -100;
	}

	.head {
		padding-top: 100rpx;

		.back {
			image {
				width: 19rpx;
				margin-left: 26rpx;
			}
		}

		.text {
			margin-top: 30rpx;
			padding-left: 36rpx;
			font-size: 60rpx;
			line-height: 84rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

	.form {
		margin-top: 70rpx;
		border-radius: 32rpx 32rpx 0 0;
		background: linear-gradient(180deg, #BCE1F7 0%, #FFFFFF 100%);
		box-shadow: inset 0rpx 4 3rpx 0rpx rgba(255, 255, 255, 0.5);

		.title {
			padding-top: 36rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.line {
				width: 297rpx;
				padding: 0 28rpx;
				box-sizing: border-box;

				image {
					width: 77rpx;
				}
			}

			.line:nth-of-type(1) {
				text-align: right;
			}

			.text {
				width: 156rpx;
				text-align: center;
				font-weight: 500;
				font-size: 39rpx;
			}
		}

		.tap {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 45rpx;
			margin-top: 30rpx;
			margin-left: 34rpx;
		}

		.input {
			width: 750rpx;
			padding: 0 34rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.agreement {
			margin: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			justify-content: center;
			align-items: center;

			.text-1,
			.text-2 {
				line-height: 37rpx;
				font-size: 26rpx;
				color: #252323;
			}

			.text-2 {
				color: #188FFF;
			}
		}

		.button {
			text-align: center;
			border-radius: 53rpx;
			line-height: 106rpx;
			background-color: #99E72E;
			width: 680rpx;
			font-size: 500;
			margin: 0 auto;
		}
	}
</style>